<template>
  <div class="navigation">
    <uni-list>
      <uni-list-chat>
        <div class="nav-items">
          <div v-for="(item, index) in navigationItems" :key="index" class="nav-item">
            <div class="icon-container">
              <img :src="item.icon" alt="导航图标" class="nav-icon" />
            </div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </uni-list-chat>
    </uni-list>
  </div>





	
	
	
	
</template>

<script>
export default {
  data() {
    return {
      navigationItems: [
        { icon: '/static/index/q1.jpg', text: '首页' },
        { icon: '/static/index/q1.jpg', text: '购物车' },
        { icon: '/static/index/q1.jpg', text: '个人中心' },
        // ...其他导航项
      ],
    };
  },
};
</script>

<style scoped>
.navigation {
  padding: 16px;
}

.nav-items {
  display: flex;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}

.icon-container {
  margin-bottom: 8px;
}

.nav-icon {
  width: 24px;
  height: 24px;
}
</style>
